<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box {
        height: 2000px;
        background-color: #ccc;
    }
</style>

<body>
    <div id="box">
    </div>
</body>
<script>
    function debounce(fn, delay) {
        let timer = null;
        return function (...args) {
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, delay)
        }
    }

    function throttle(fn,wait){
      let timer = null;
      let lastTime = 0;
      return function(...args){
        const nowTime = Date.now();
        const remainTime = wait - (nowTime - lastTime);
        if(remainTime<=0){
            if(timer){
                clearTimeout(timer)
            }
            fn.apply(this,args)
            lastTime = nowTime
        }else if(!timer){
            timer = setTimeout(()=>{
                fn.apply(this,args)
                lastTime = Date.now()
            },remainTime)
        }
      }
    }

    document.addEventListener('scroll', throttle(function log(){
        console.log('滚动');
    },100))

</script>

</html>